<template>
    <view class="sc-navbar">
        <view class="sc-navbar_content" :style="[scNavbarContentStyle]">
            <view class="content_top" :style="{ height: statusBarHeight + 'px' }"></view>
            <view class="content_main" :style="{ height: height + 'px' }">
                <slot>
                    <view class="main_left" @tap="handlerLeft">
                        <sc-icon name="arrow-left" v-if="back" :size="leftIconSize" :color="leftIconColor"></sc-icon>
                    </view>
                    <view class="main_center" :style="[contentMainStyle]">
                        <slot name="center">
                            <text class="center_title" :style="[centerMainTitleStyle]">{{ title }}</text>
                        </slot>
                    </view>
                    <view class="main_right">
                        <slot name="right"></slot>
                    </view>
                </slot>
            </view>
        </view>
        <view class="sc-navbar_placeholder">
            <view class="placeholder_top" :style="{ height: statusBarHeight + 'px' }"></view>
            <view class="placeholder_main" :style="{ height: height + 'px' }">
            </view>
        </view>
    </view>
</template>

<script>
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

export default {
    props: {
        height: {
            type: [String, Number],
            default: '44'
        },
        bgColor: {
            type: String,
            default: '#eee'
        },
        title: {
            type: String,
            default: ''
        },
        titleColor: {
            type: String,
            default: '#000'
        },
        titleStyle: {
            type: Object,
            default: () => { }
        },
        back: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: [String, Number],
            default: 99
        },
        autoBack: {
            type: Boolean,
            default: true
        },
        leftIconSize: {
            type: [String, Number],
            default: '40'
        },
        leftIconColor: {
            type: String,
            default: '#000'
        },

    },
    mixins: [mpMixin, mixin],
    emits: ['leftClick'],
    data() {
        return {
        }
    },
    computed: {
        scNavbarContentStyle() {
            return {
                background: this.$sc.getColor(this.bgColor),
                zIndex: this.zIndex,
                position: this.placeholder ? 'fixed' : 'auto',
                top: this.placeholder ? 0 : 'auto',
            }
        },
        contentMainStyle() {
            const info = uni.$sc.sys
            let width = 'auto';
            // #ifndef H5 || APP-PLUS
            width = (info.windowWidth - (info.menuButtonWidth + info.menuButtonRight) * 2) + 'px';
            // #endif
            return {
                width
            }
        },
        centerMainTitleStyle() {
            return {
                color: this.titleColor,
                ...this.titleStyle
            }
        },
        statusBarHeight() {
            return uni.$sc.sys.statusBarHeight
        },
    },
    methods: {
        handlerLeft() {
            this.$emit('leftClick')
            this.autoBack && uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.sc-navbar {
    .sc-navbar_content {
        width: 100vw;

        .content_main {
            left: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100vw;
            position: fixed;
            background-color: transparent;
        }

        .main_left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 100%;
        }

        .main_center {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;

            .center_title {
                font-weight: bold;
                font-size: 34rpx;
                color: #111111;
            }
        }

        .main_right {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
    }

    .sc-navbar_placeholder {
        background-color: transparent;
    }
}
</style>
